html {

  font-size: calc(100vw/750*100);
}

.box {
  width: 100%;
  height: 100%;

  .left {
    width: 100%;
    height: 3rem;
    background: rgba(199, 173, 118);

    dl {

      display: flex;
      padding: .7rem .4rem;
      font-size: .2rem;

      dd {

        padding: .3rem .4rem;

        p {
          color: #fff;
          font-size: .3rem;
        }
      }
    }
  }

  .conter {
    background: #fff;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        width: 2.5rem;
        height: 2.6rem;
        border: 2px solid #eee;
        line-height: 1rem;
        text-align: center;
        flex-direction: column;
        display: flex;

        i {
          font-size: .6rem;
          color: #9e9e9e;
          text-align: center;
          display: block;
          margin-top: .4rem;
        }

        p {
          font-size: .3rem;
        }

        a {
          font-size: .3rem;
        }
      }
    }
  }

  .btn {

    width: 100%;

    button {
      width: 100%;
      height: 1rem;
      margin-top: .1rem;
      border: none;
      outline: none;
      background: #fff;
    }
  }

}
